<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="8" :lg="6">
        <div class="box-wrapper platform-info">
          <div class="info-media">
            <el-avatar class="hd" shape="square" :src="app.siteLogo"></el-avatar>
            <div class="bd">
              <div class="tit">{{ app.siteName }}</div>
              <div class="desc">
                <el-tag>精英版</el-tag>
              </div>
            </div>
          </div>
          <ul class="info-list">
            <li><span>系统版本</span>V 1.0.0</li>
            <li><span>到期时间</span>2022-12-22</li>
          </ul>
        </div>
      </el-col>
      <el-col :xs="24" :sm="16" :lg="18">
        <div class="box-wrapper box-panel">
          <div class="panel-header">
            <div class="title">实时概况</div>
            <div class="right">更新时间：{{ new Date() | formatDateTime('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div class="panel-body">
            <ul class="statistic-list">
              <li>
                <div class="statistic-name">今日充值金额</div>
                <div class="statistic-value">{{ Number(today_real_time_overview.recharge_real_pay_amount).toFixed(2) }}</div>
                <div class="statistic-name">昨日：{{ Number(yesterday_real_time_overview.recharge_real_pay_amount).toFixed(2) }}</div>
              </li>
              <li>
                <div class="statistic-name">今日消费金额</div>
                <div class="statistic-value">{{ Number(today_real_time_overview.order_amount).toFixed(2) }}</div>
                <div class="statistic-name">昨日：{{ Number(yesterday_real_time_overview.order_amount).toFixed(2) }}</div>
              </li>
              <li>
                <div class="statistic-name">今日订单数</div>
                <div class="statistic-value">{{ today_real_time_overview.order_count }}</div>
                <div class="statistic-name">昨日：{{ yesterday_real_time_overview.order_count }}</div>
              </li>
              <li>
                <div class="statistic-name">今日新增店铺数</div>
                <div class="statistic-value">{{ today_real_time_overview.store_count }}</div>
                <div class="statistic-name">昨日：{{ yesterday_real_time_overview.store_count }}</div>
              </li>
              <li>
                <div class="statistic-name">今日新增会员数</div>
                <div class="statistic-value">{{ today_real_time_overview.user_count }}</div>
                <div class="statistic-name">昨日：{{ yesterday_real_time_overview.user_count }}</div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="box-wrapper box-panel">
      <div class="panel-header">
        <div class="title">店铺数据</div>
        <div class="right">更新时间：{{ new Date() | formatDateTime('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>
      <div class="panel-body">
        <ul class="statistic-list">
          <li>
            <div class="statistic-name">店铺总数</div>
            <div class="statistic-value">{{ store_data.total_store_count }}</div>
          </li>
          <li>
            <div class="statistic-name">会员总数</div>
            <div class="statistic-value">{{ store_data.total_user_count }}</div>
          </li>
          <li>
            <div class="statistic-name">充值总额</div>
            <div class="statistic-value">{{ Number(store_data.recharge_real_pay_amount).toFixed(2) }}</div>
          </li>
          <li>
            <div class="statistic-name">消费总额</div>
            <div class="statistic-value">{{ Number(store_data.order_amount).toFixed(2) }}</div>
          </li>
          <li>
            <div class="statistic-name">未消费余额</div>
            <div class="statistic-value">{{ Number(store_data.total_balance).toFixed(2) }}</div>
          </li>
          <li>
            <div class="statistic-name">赠送金额</div>
            <div class="statistic-value">{{ Number(store_data.recharge_give_amount).toFixed(2) }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="box-wrapper box-panel">
      <div class="panel-header">
        <div class="left">
          <div class="title">店铺排行</div>
          <el-radio-group v-model="radioTime" size="mini" @change="changeTime">
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="全部"></el-radio-button>
          </el-radio-group>
        </div>
        <ul class="right-tab">
          <li v-for="(item, index) in rankingList" :key="index" :class="{ 'active': index === rankingActive }" @click="checkRanking(index)">{{ item.name }}</li>
        </ul>
      </div>
      <div class="panel-body pd">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="店铺名称" align="center">
          </el-table-column>
          <el-table-column label="注册时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.creation_time | formatDateTime('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="充值金额" align="center">
            <template slot-scope="scope">
              <span>{{ Number(scope.row.recharge_real_pay_amount).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会员数" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.user_count }}</span>
            </template>
          </el-table-column>
          <el-table-column label="消费金额" align="center">
            <template slot-scope="scope">
              <span>{{ Number(scope.row.order_amount).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getStatisticTimeRange, getStatisticsPlatformRank } from "@/api/statistics";
import { mapGetters } from 'vuex'
import { formatDateTime, formatStartDate } from "@/filters/modules/date-time-filters"
export default {
  name: 'Dashboard',
  components: {
  },
  data() {
    return {
      radioTime: '本月',
      rankingList: [{
        key: "recharge_real_pay_amount",
        name: "充值金额"
      }, {
        key: "user_count",
        name: "会员数"
      }, {
        key: "order_amount",
        name: "消费金额"
      }],
      rankingActive: 0,
      sortingField: "recharge_real_pay_amount",
      tableData: [],

      today_real_time_overview: {
        recharge_amount: 0,
        recharge_pay_amount: 0,
        recharge_real_pay_amount: 0,
        recharge_refund_amount: 0,
        recharge_give_amount: 0,
        recharge_balance: 0,
        recharge_real_balance: 0,
        order_amount: 0,
        order_count: 0,
        order_user_count: 0,
        total_balance: 0
      },
      yesterday_real_time_overview: {
        recharge_amount: 0,
        recharge_pay_amount: 0,
        recharge_real_pay_amount: 0,
        recharge_refund_amount: 0,
        recharge_give_amount: 0,
        recharge_balance: 0,
        recharge_real_balance: 0,
        order_amount: 0,
        order_count: 0,
        order_user_count: 0,
        total_balance: 0
      },
      store_data: {
        recharge_amount: 0,
        recharge_pay_amount: 0,
        recharge_real_pay_amount: 0,
        recharge_refund_amount: 0,
        recharge_give_amount: 0,
        recharge_balance: 0,
        recharge_real_balance: 0,
        order_amount: 0,
        order_count: 0,
        order_user_count: 0,
        total_balance: 0
      }
    }
  },
  computed: {
    ...mapGetters(['app'])
  },
  created() {
    // // 今日
    // this.getStatisticRealTimeToday()
    // // 昨日
    // this.getStatisticRealTimeYesterday()
    // // 总数
    // this.getStatisticStoreData()
    // // 店铺排行
    // this.getStatisticsPlatformRank()
  },
  activated() {
    // // 今日
    // this.getStatisticRealTimeToday()
    // // 昨日
    // this.getStatisticRealTimeYesterday()
    // // 总数
    // this.getStatisticStoreData()
    // // 店铺排行
    // this.getStatisticsPlatformRank()
  },
  methods: {
    // 今日
    getStatisticRealTimeToday() {
      const start_time = this.fun_date(0) + " " + "00:00:00"
      const end_time = this.fun_date(0) + " " + "23:59:59"
      getStatisticTimeRange({
        start_time: start_time,
        end_time: end_time,
        statistic_type: "recharge,order,member,store,user"
      }).then(result => {
        this.today_real_time_overview = result
      })
    },
    // 昨日
    getStatisticRealTimeYesterday() {
      const start_time = this.fun_date(-1) + " " + "00:00:00"
      const end_time = this.fun_date(-1) + " " + "23:59:59"
      getStatisticTimeRange({
        start_time: start_time,
        end_time: end_time,
        statistic_type: "recharge,order,member,store,user"
      }).then(result => {
        this.yesterday_real_time_overview = result
      })
    },
    // 总数
    getStatisticStoreData() {
      getStatisticTimeRange({
        statistic_type: "recharge,order,member,store,user"
      }).then(result => {
        this.store_data = result
      })
    },
    getStatisticsPlatformRank() {
      const data = {
        start_date: this.radioTime === "本月" ? formatStartDate("YYYY-MM-DD") : undefined,
        end_date: this.radioTime === "本月" ? formatDateTime(new Date(), "YYYY-MM-DD") : undefined,
        // sorting_field: this.sortingField,
        offset: 0,
        limit: 10
      }
      getStatisticsPlatformRank(data).then(result => {
        let list = []
        if (this.sortingField === "recharge_real_pay_amount") {
          list = result.items.sort((a, b) => b.recharge_real_pay_amount - a.recharge_real_pay_amount)
        }
        if (this.sortingField === "user_count") {
          list = result.items.sort((a, b) => b.user_count - a.user_count)
        }
        if (this.sortingField === "order_amount") {
          list = result.items.sort((a, b) => b.order_amount - a.order_amount)
        }
        this.tableData = list
      })
    },
    changeTime() {
      this.getStatisticsPlatformRank()
    },
    checkRanking(index) {
      this.rankingActive = index
      this.sortingField = this.rankingList[index].key

      // this.getStatisticsPlatformRank()
      let list = []
      if (this.sortingField === "recharge_real_pay_amount") {
        list = this.tableData.sort((a, b) => b.recharge_real_pay_amount - a.recharge_real_pay_amount)
      }
      if (this.sortingField === "user_count") {
        list = this.tableData.sort((a, b) => b.user_count - a.user_count)
      }
      if (this.sortingField === "order_amount") {
        list = this.tableData.sort((a, b) => b.order_amount - a.order_amount)
      }
      this.tableData = list
    },
    fun_date(aa) {
      const date1 = new Date();
      const time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
      const date2 = new Date(date1);
      date2.setDate(date1.getDate() + aa);
      const time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
      return time2
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 0 20px;
  position: relative;

  .box-wrapper {
    background: #fff;
    border-radius: 4px;
  }
}

.platform-info {
  height: 170px;
  padding: 0 20px;
  .info-media {
    padding: 20px 0;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    .hd {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .bd {
      flex: 1;
      overflow: hidden;
      .tit {
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
  }
  .info-list {
    padding: 20px 0;
    margin: 0;
    list-style: none;
    li {
      padding-left: 0;
      font-size: 12px;
      color: #666;
      span {
        margin-right: 20px;
      }
      & + li {
        margin-top: 10px;
      }
    }
  }
}
.box-panel {
  margin-bottom: 20px;
  .panel-header {
    min-height: 38px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    .left {
      display: flex;
      align-items: center;
    }
    .title {
      margin-right: 20px;
      flex: 1;
      font-size: 14px;
      font-weight: bold;
    }
    .right {
      font-size: 12px;
      color: #666;
    }
    .right-tab {
      display: flex;
      margin: 0;
      list-style: none;
      padding-left: 0;
      li {
        position: relative;
        font-size: 14px;
        cursor: pointer;
        & + li {
          margin-left: 20px;
        }
        &.active {
          color: #1477e1;
          &::after {
            content: "";
            position: absolute;
            bottom: -16px;
            left: 0;
            right: 0;
            border-bottom: 2px solid #1477e1;
          }
        }
      }
    }
  }
  .panel-body {
    &.pd {
      padding: 0 20px 20px;
    }
  }
  .statistic-list {
    display: flex;
    margin: 0;
    list-style: none;
    padding-left: 0;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      padding-left: 0;
      min-height: 132px;
      .statistic-name {
        font-size: 14px;
        padding: 5px;
        color: #999;
      }
      .statistic-value {
        padding: 15px 10px;
        font-size: 24px;
      }
    }
  }
}
</style>
